@mixin clearfix {
  &:after {
    content: "";
    display: table;
    clear: both;
  }
}

@mixin scrollBar {
  &::-webkit-scrollbar-track-piece {
    background: #d3dce6;
  }

  &::-webkit-scrollbar {
    width: 6px;
  }

  &::-webkit-scrollbar-thumb {
    background: #99a9bf;
    border-radius: 20px;
  }
}

@mixin abs($top, $right: null, $bottom: null, $left: null) {
	position: absolute;
	top: $top;
	right: $right;
	bottom: $bottom;
	left: $left;
}

@mixin fixed($top, $right: null, $bottom: null, $left: null) {
	position: fixed;
	top: $top;
	right: $right;
	bottom: $bottom;
	left: $left;
}

@mixin site($left: 0, $right: null) {
	position: absolute;
	left: $left;
	right: $right;
	top: 50%;
	transform: translateY(-50%);
}

@mixin siteCenter() {
	@include abs(50%, 50%);
	transform: translate(50%, -50%);
}

@mixin radius($topL, $topR: null, $bottomR: null, $bottomL: null) {
	$bottomL: #{if($bottomL, $bottomL, if($bottomR, $bottomR, $topL))};
	$bottomR: #{if($bottomR, $bottomR, $topL)};
	$topR: #{if($topR, $topR, $topL)};
	border-radius: $topL $topR $bottomR $bottomL;
}

@mixin tst($property: all, $duration: 0.3s, $delay: 0s, $fun: cubic-bezier(0.25, 0.1, 0.25, 1)) {
	// saas不区分空格
	$split-values: str-split($property, ',');
	$lastStr: $duration $delay $fun unquote(',');
	$list: ();

	@each $value in $split-values {
		$list: append($list, (unquote($value) $lastStr));
	}

	transition: $list;
}

// STR-分裂
@function str-split($str, $separator) {
	$string: quote($str);
	// empty array/list
	$split-arr: ();
	// first index of separator in string
	$index: str-index($string, $separator);

	// loop through string
	@while $index !=null {
		// get the substring from the first character to the separator
		$item: str-slice($string, 1, $index - 1);
		// push item to array
		$split-arr: append($split-arr, $item);
		// remove item and separator from string
		$string: str-slice($string, $index + 1);
		// find new index of separator
		$index: str-index($string, $separator);
	}

	// add the remaining string to list (the last item)
	$split-arr: append($split-arr, $string);

	@return $split-arr;
}

@mixin ellipsis($column: 1) {
	overflow: hidden;
	-o-text-overflow: ellipsis;
	text-overflow: ellipsis;

	@if $column==1 {
		white-space: nowrap;
	} @else {
		display: -webkit-box;
		white-space: normal !important;
		word-wrap: break-word;
		-webkit-line-clamp: $column;
		-webkit-box-orient: vertical;
	}
}

@mixin flex($direction: column) {
	display: flex;
	flex-direction: $direction;
}

@mixin set_flex($direction: null, $align: null, $justify: null, $wrap: null) {
	display: flex;

	@if ($direction !=null) {
		flex-direction: $direction;
	}

	@if ($align !=null) {
		align-items: $align;
	}

	@if ($justify !=null) {
		justify-content: $justify;
	}

	@if ($wrap !=null) {
		flex-wrap: $wrap;
	}
}

@mixin absolute($top: null, $right: null, $bottom: null, $left: null) {
	position: absolute;

	@if ($top !=null) {
		top: $top;
	}

	@if ($right !=null) {
		right: $right;
	}

	@if ($bottom !=null) {
		bottom: $bottom;
	}

	@if ($left !=null) {
		left: $left;
	}
}

@mixin fixed($top: null, $right: null, $bottom: null, $left: null) {
	position: fixed;

	@if ($top !=null) {
		top: $top;
	}

	@if ($right !=null) {
		right: $right;
	}

	@if ($bottom !=null) {
		bottom: $bottom;
	}

	@if ($left !=null) {
		left: $left;
	}
}

@mixin set_radius($radius) {
	border-radius: $radius;
}

@mixin set_margin($direction: top, $num: 10px) {
	@if ($direction==top) {
		margin-top: $num;
	}

	@if ($direction==left) {
		margin-left: $num;
	}

	@if ($direction==bottom) {
		margin-bottom: $num;
	}

	@if ($direction==right) {
		margin-right: $num;
	}
}

@mixin set_padding($direction: top, $num: 10px) {
	@if ($direction==top) {
		padding-top: $num;
	}

	@if ($direction==left) {
		padding-left: $num;
	}

	@if ($direction==bottom) {
		padding-bottom: $num;
	}

	@if ($direction==right) {
		padding-right: $num;
	}
}

@mixin triangle($direction: top, $width: 20px, $color: red) {
	width: 0;
	height: 0;
	border: $width solid transparent;

	@if ($direction==top) {
		border-bottom-color: $color;
	}

	@if ($direction==right) {
		border-left-color: $color;
	}

	@if ($direction==bottom) {
		border-top-color: $color;
	}

	@if ($direction==left) {
		border-right-color: $color;
	}
}

@mixin ellipsis($column: 1) {
	overflow: hidden;
	text-overflow: ellipsis;
	@if $column ==1 {
		white-space: nowrap;
	} @else {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: $column;
	}
}